import React, { Component } from 'react';
import IceContainer from '@icedesign/container';
import enquire from 'enquire.js';
import { Balloon, Icon, Grid } from '@icedesign/base';

const { Row, Col } = Grid;

export default class StatisticalCard extends Component {
  static displayName = 'StatisticalCard';

  constructor(props) {
    super(props);
    this.state = {
      isMobile: false,
    };
  }

  static defaultProps = {
    status : [
      {
        count: 0,
        title: '推送中',
        desc : '正在执行中的任务数量',
      },
      {
        count: '0',
        title: '本月推送数量',
        desc : '本月已推送至广告商的任务数量',
      },
      {
        count: '0',
        title: '总推送数量',
        desc : '已推送至广告商的任务总数量',
      },
    ]
  };

  componentDidMount() {
    this.enquireScreenRegister();
  }

  enquireScreenRegister = () => {
    enquire.register('only screen and (max-width: 720px)', {
      match : ()=>{ this.setState({ isMobile: true, }); }
    });
  };

  renderItem = () => {
    const itemStyle = this.state.isMobile ? { justifyContent: 'left' } : {};
    return this.props.status.map((data, idx) => {
      return (
        <Col xxs="24" s="12" l="8" key={idx}>
          <div style={{ ...styles.statisticalCardItem, ...itemStyle }}>
            <div style={styles.statisticalCardDesc}>
              <div style={styles.statisticalCardText}>
                {data.title}
                <Balloon align="t" alignment="edge"
                  trigger={
                    <span>
                      <Icon type="help" style={styles.helpIcon} size="xs" />
                    </span>
                  }
                  closable={false}>
                  {data.desc}
                </Balloon>
              </div>
              <div style={styles.statisticalCardNumber}>{data.count}</div>
            </div>
          </div>
        </Col>
      );
    });
  };

  render() {
    return (
      <IceContainer style={styles.container}>
        <Row wrap>{this.renderItem()}</Row>
      </IceContainer>
    );
  }
}

const styles = {
  container: {
    padding: '10px 20px',
  },
  statisticalCardItem: {
    display: 'flex',
    justifyContent: 'center',
    padding: '10px 0',
  },
  circleWrap: {
    width: '70px',
    height: '70px',
    position: 'relative',
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
    borderRadius: '50%',
    marginRight: '10px',
  },
  imgStyle: {
    maxWidth: '100%',
  },
  helpIcon: {
    marginLeft: '5px',
    color: '#b8b8b8',
  },
  statisticalCardDesc: {
    display: 'flex',
    flexDirection: 'column',
    justifyContent: 'center',
  },
  statisticalCardText: {
    position: 'relative',
    color: '#333333',
    fontSize: '12px',
    fontWeight: 'bold',
    marginBottom: '4px',
  },
  statisticalCardNumber: {
    color: '#333333',
    fontSize: '24px',
  },
  itemHelp: {
    width: '12px',
    height: '12px',
    position: 'absolute',
    top: '1px',
    right: '-15px',
  },
};
